<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://res.wx.qq.com/t/wx_fed/weui-source/res/2.5.10/weui.min.css">
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
</head>

<body class="df dcloum">
    <!-- header部分 -->
    <header class="font14 tcenter rel">
        个人资料<span class="iconfont icon-xiangzuo abs" id="backBtn"></span>
    </header>
    <main class="flex">
        <div class="weui-cells  ">
            <!-- 第1联  头像-->
            <div class="weui-cell weui-cell_access">
                <spanc>联系人名称</spanc>
                <div class="weui-cell__bd" id="b1_txt1">
                    <label>
                        <span><img src="../../assets/imgs/headerPic.jpg" alt="" class="headPic" id="vtar"></span>
                        <input type="file" id="fileBtn">
                    </label>
                </div>
                <span class="weui-cell__ft"></span>
            </div>
            <!-- 昵称 -->
            <div class="weui-cell  weui-cell_access ">
                <span class="weui-cell__bd">
                    <span >昵称</span>
                </span>
                <span >
                    <input id="nickName" id="js_input1" type="text" pattern="[0-9]*" placeholder="如：张筱" maxlength="16"  />
                </span>
            </div>
            <!-- 性别 -->
            <div class="weui-cell  weui-cell_access " id="showSex" >
                <span class="weui-cell__bd">
                    <span>性别</span>
                </span>
                <span class="weui-cell__ft" >
                    <span class="weui-select" id="sexText">详细信息</span>
                </span>
            </div>
            <!-- 生日-->
            <div class="weui-cell  weui-cell_access " id="showBirthday" >
                <span class="weui-cell__bd">
                    <span>生日</span>
                </span>
                <span class="weui-cell__ft">
                    <span class="weui-select"id="birthdayText">详细信息</span>
                </span>
            </div>
            <!-- 所在省份-->
            <div class="weui-cell  weui-cell_access " id="showProvince">
                <span class="weui-cell__bd">
                    <span>所在省份</span>
                </span>
                <span class="weui-cell__ft">
                    <span class="weui-select" id="provinceText">详细信息</span>
                </span>
            </div>
            <!-- 所在城市-->
            <div class="weui-cell  weui-cell_access " id="showCity">
                <span class="weui-cell__bd">
                    <span>所在城市</span>
                </span>
                <span class="weui-cell__ft">
                    <span class="weui-select" id="cityText">详细信息</span>
                </span>
            </div>
            <!-- 个人介绍文本域 -->
            <div class="weui-cell">
                <span class="weui-cell__bd">
                    <span>问题描述</span>
                </span>
                <span class="weui-cell__ft"></span>
            </div>
            <div class="weui-form__control-area">
                <div class="weui-cells__group weui-cells__group_form">
                    <div class="weui-cells weui-cells_form">
                        <div class="weui-cell weui-cell_active">
                            <div class="weui-cell__bd">
                                <textarea class="weui-textarea" placeholder="请描述你所发生的问题" rows="3" id="info"></textarea>
                                <div class="weui-textarea-counter"><span id="currentLen">0</span>/200</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 保存按钮 -->
        <button class="save-btn " id="saveBtn">保存</button>
    </main>
    <script src="https://res.wx.qq.com/t/wx_fed/cdn_libs/res/weui/1.2.8/weui.min.js"></script>

</body>

</html>